<!DOCTYPE html>
<html>
	<head>
		<meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no" />
		<meta charset="utf-8" />
		<link rel="stylesheet" type="text/css" href="public/css/style.css"/>
		<link rel="stylesheet" type="text/css" href="public/css/reset.css"/>
		<link rel="stylesheet" type="text/css" href="public/css/bootstrap.min.css"/>
		<title></title>
	</head>
	<style>
		.bg{
			background: linear-gradient(to right, rgba(0,0,0,.3) , rgba(0,0,0,.3)), url('public/img/bg.jpeg');
			background-size: contain;
			border-radius: 0!important;
		}
		.alert{
			width: 80%;
			position: fixed;
			bottom: 30px;
			left: 10%;
			transition: .5s;
			opacity: 1;
		}
		.myHide{
			opacity: 0;
			transition: .5;
			bottom: -50px;
			/* display: none; */
		}
		.table-wrap{
			padding: 0 30px;
			padding-bottom: 50px;
		}
		table{
			/* border: 1px solid #eee; */
			box-shadow: 0px 2px 10px 0px #a4d7dc91;
			margin-top: 30px;
		}
		th{
			padding: 20px 15px!important;
			line-height: 125%!important;
		}
		.jumbotron{
			margin-bottom: 0;
		}
		td{
			padding: 20px 15px!important;
			line-height: 125%!important;
		}
		#loading{
			transition: .5s;
			background-color: #f7f7f7;
			line-height: 200%;
			opacity: 1;
		}
		#loading.hide{
			opacity: 0;
		}
		footer{
			position: fixed;
			bottom: 0;
			left: 0;
			width: 100%;
		}
		.f-cff{
			color: #fff;
		}
		.m-l10{
			margin-left: 10px;
		}
		.m-r10{
			margin-right: 10px;
		}
		.txt-c{
			text-align: center;
		}
		.p-5{
			padding-left: 5px;
		}
		.p-l10{
			padding-left: 10px;
		}
		.m-l20{
			margin-left: 20px;
		}
		@media screen and (max-width: 768px){
		    .table-wrap {
			    padding: 0 0px;
			    padding-bottom: 100px;
			    margin: 0 10px;
			}
		}
		
	</style>
	<body>
		<div class="container-fluid">
			<div class="jumbotron row bg">
			  <h1 class="f-cff">Invite Code List</h1>
			</div>
		</div>
		<ol class="breadcrumb">
		  <li class="m-l10"><a href="#">Home</a></li>
		  <li><a href="#">Library</a></li>
		  <li class="active">Data</li>
		</ol>
		<div class="m-t20 form-inline  p-l10 col-lg-offset-0 col-xs-10 col-xs-offset-1">
		  <div class="form-group m-r10">
		    <label for="exampleInputName2">搜索</label>
		    <input type="text" class="form-control" id="searchInput" placeholder="输入邀请码或者用户名...">
		  </div>
		  <button type="submit" class="btn btn-primary" id="searchBtn">搜索</button>
		</div>
		<div style="clear: both;padding-bottom: 20px;"></div>
		<div id="loading" class=" txt-c  ">加载中......</div>
		<!-- <ol class="breadcrumb m-t20 m-l10 m-r10">
		  <li class="f16">USER LIST</li>
		</ol> -->
		<div class="table-wrap p-l10">
		
		<table style="display: none;" class="table table-striped  table-hover">
		    <thead>
		      <tr>
		        <th>邀请码</th>
		        <th>用户名</th>
		        <th>用户信息</th>
		        <th class="hidden-xs">生成日期</th>
		      </tr>
		    </thead>
		    <tbody>
		    </tbody>
		</table>
		</div>
		<div class="alert alert-success myHide" role="alert">
			<button type="button" class="close" data-dismiss="alert" aria-label="Close"><span aria-hidden="true">&times;</span></button>
			<b>添加成功!</b> You successfully add the random code!!!
		</div>
		<footer class="bg-info p-5 txt-c ">@copyright WangFei Technical Support <span class="m-l20">contact:17605071237</span></footer>
	</body>
	<script src="https://cdn.bootcss.com/jquery/3.3.1/jquery.min.js"></script>
	<script type="text/javascript">

		// var randomCode;
		// 关闭标签
		$('.close').click(function(){
			$(this).parent().addClass('myHide')
		})
		
		// 搜索
		$('#searchBtn').click(function(){
			search()
		})

		var date = new Date()

		var throttle = function(func, delay) {     
		    var timer = null;     
		    var startTime = Date.now();     
		    return function() {             
		        var curTime = Date.now();             
		        var remaining = delay - (curTime - startTime);             
		        var context = this;             
		        var args = arguments;             
		        clearTimeout(timer);              
		        if (remaining <= 0) {                    
		            func.apply(context, args);                    
		            startTime = Date.now();              
		        } else {                    
		            timer = setTimeout(func, remaining);              
		        }      
		    }
		}
        
        function dateFormat(fmt, date) {
		    let ret;
		    const opt = {
		        "Y+": date.getFullYear().toString(),        // 年
		        "m+": (date.getMonth() + 1).toString(),     // 月
		        "d+": date.getDate().toString(),            // 日
		        "H+": date.getHours().toString(),           // 时
		        "M+": date.getMinutes().toString(),         // 分
		        "S+": date.getSeconds().toString()          // 秒
		        // 有其他格式化字符需求可以继续添加，必须转化成字符串
		    };
		    for (let k in opt) {
		        ret = new RegExp("(" + k + ")").exec(fmt);
		        if (ret) {
		            fmt = fmt.replace(ret[1], (ret[1].length == 1) ? (opt[k]) : (opt[k].padStart(ret[1].length, "0")))
		        };
		    };
		    return fmt;
		}

		function debounce(fn, wait) {    
		    var timeout = null;    
		    return function() {        
		        if(timeout !== null)   clearTimeout(timeout);        
		        timeout = setTimeout(fn, wait);    
		    }
		}

		$('#searchInput').keyup(debounce(search,500))

		function search(){
			$('table').fadeOut(150);
			var search = $('#searchInput').val()
			$.post('http://119.45.49.244:7001/user/search',{title:search},function(res){
				
				if(res.status==200){
					$('table tbody').empty()
					for(var i=0;i<res.data.length;i++){
						let {inviteCode, userName, userInfo, createTime} = res.data[i]
						createTime = dateFormat("YYYY-mm-dd HH:MM",new Date(createTime))
						var tr = ` <tr>
						    <td>${inviteCode}</td>
						    <td>${userName||'暂无用户'}</td>
						    <td>${userInfo||'暂无用户信息'}</td>
							<td class='hidden-xs'>${createTime}</td>
						  </tr>`
						  
						$('table tbody').append(tr)
					}
				}
				$('table').fadeIn(200);
				$('#loading').addClass('hide');
			})
		}

		$(document).ready(function(){
			getList();
		})
		
		// 获取用户列表
		function getList(){
			$.post('http://119.45.49.244:7001/user/noUsedLists',{},function(res){
				$('table').fadeIn();
				if(res.status==200){
					$('table tbody').empty()
					for(var i=0;i<res.data.length;i++){
						let {inviteCode, userName, userInfo, createTime} = res.data[i]
						createTime = dateFormat("YYYY-mm-dd HH:MM",new Date(createTime))
						// createTime = new Date(createTime).toLocaleString().replace('/', '-').replace('/', '-')
						var tr = ` <tr>
						    <td>${inviteCode}</td>
						    <td>${userName||'暂无用户'}</td>
						    <td>${userInfo||'暂无用户信息'}</td>
							<td class='hidden-xs'>${createTime}</td>
						  </tr>`
						  
						$('table tbody').append(tr)
					}
				}
				$('#loading').addClass('hide');
			})
		}
		
	</script>
</html>
